<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>金天国际</title>
  <meta name="viewport" content="initial-scale=1, maximum-scale=1">
  <!-- <link rel="shortcut icon" href="http://favicon.ico"> -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">

  <!-- <link rel="stylesheet" href="../../css/swiper.min.css"> -->
  <!-- <link rel="stylesheet" href="../../css/animate.css"> -->
  <link rel="stylesheet" href="https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/css/sm.min.css">
  <link rel="stylesheet" href="https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/css/sm-extend.min.css">
  <script type="text/javascript" src="https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/common/common.js"></script>
  <link rel="stylesheet" href="https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/css/Home/search.css">
  <!-- <link rel="stylesheet" href="../../../css/sm.min.css">
  <link rel="stylesheet" href="../../../css/sm-extend.min.css">
  <script type="text/javascript" src="../../../common/common.js"></script>
  <link rel="stylesheet" href="../../../css/Home/search.css"> -->
</head>

<body>
  <div class="page-group">
    <div class="page">
      <!-- 标题栏 -->
      <header class="bar bar-nav">
        <!-- <div class="bar-box search-bar">
          <div class="search-input searchs">
            <label class="icon icon-search" for="search"></label>
            <input type="search" id="search" placeholder="输入关键字..."/>
          </div>
          <a class="searchbar-cancel" id="search-cancel">取消</a>
        </div> -->
        <div class="bar-box">
          <div class="bar-left">
            <!-- <img src="https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/img/home/back.png" alt="" onclick="back()"> -->
          </div>
          <div class="search-input searchs">
            <label class="icon icon-search" for="search"></label>
            <input type="search" id="search" placeholder="输入关键字..." />
          </div>
          <div class="bar-right">
            <!-- <img src="../../img/home/position.png" alt=""> -->
            <a href="#" id="search-cancel">搜索</a>
          </div> 
        </div>
      </header>

      <!-- 这里是页面内容区 -->
      <div class="content search-container">
      <!-- <div class="content pull-to-refresh-content infinite-scroll infinite-scroll-bottom" data-ptr-distance="50" data-distance="100"> -->

        <!-- 默认的下拉刷新层 -->
        <!-- <div class="pull-to-refresh-layer">
          <div class="preloader"></div>
          <div class="pull-to-refresh-arrow"></div>
        </div> -->

         <!-- 加载提示符 -->
         <!-- <div class="infinite-scroll-preloader">
            <div class="preloader"></div>
        </div> -->
        <div class="buttons-tab">
          <a href="#tab1" class="tab-link active button">
            <span>商品</span>
          </a>
          <a href="#tab2" class="tab-link button">
            <span>资讯</span>
          </a>
          <a href="#tab3" class="tab-link button">
            <span>店铺</span>
          </a>
        </div>

        <!-- 搜索记录-->
        <div class="container">
          <div class="search">
            <p>历史搜索</p>
            <div class="search-list">
              <span>历史搜索词</span>
              <span>历史搜索词</span>
            </div>
          </div>
          <div class="search">
            <p>热门搜索</p>
            <div class="search-list">
              <span>热门</span>
              <span>热门搜索</span>
              <span>热门搜索词1</span>
              <span>热门搜索词热门搜索词人们热</span>
              <span>热门搜索</span>
            </div>
          </div>
        </div>

        <div class="container">
          <p>热门推荐</p>
          <div class="tabs">
            <!-- 商品 -->
            <div id="tab1" class="tab active">
              <div class="row">
                <div class="col-50">
                  <div class="card-flex-box">
                    <div valign="bottom" class="card-header color-white no-border no-padding">
                      <img class="card-cover" src="http://placekitten.com/100/100" alt="" >
                      <!-- <img class="card-cover" src="//gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" alt="" > -->
                    </div>
                    <div class="card-content">
                      <div class="card-content-inner card_flex__inner">
                        <p class="color-gray">商品名称</p>
                        <p class="label-box">
                          <span class="label">雪莲</span>
                          <span class="label">功效</span>
                        </p>
                      </div>
                    </div>
                    <!-- <div class="card-footer">
                      <a href="#" class="link">赞</a>
                      <a href="#" class="link">更多</a>
                    </div> -->
                  </div>
                </div>
                <div class="col-50">
                  <div class="card-flex-box">
                    <div valign="bottom" class="card-header color-white no-border no-padding">
                      <img class="card-cover" src="http://placekitten.com/100/100" alt="" >
                      <!-- <img class="card-cover" src="//gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" alt="" > -->
                    </div>
                    <div class="card-content">
                      <div class="card-content-inner card_flex__inner">
                        <p class="color-gray">商品名称</p>
                        <p class="label-box">
                          <span class="label">雪莲</span>
                          <span class="label">功效</span>
                        </p>
                      </div>
                    </div>
                    <!-- <div class="card-footer">
                      <a href="#" class="link">赞</a>
                      <a href="#" class="link">更多</a>
                    </div> -->
                  </div>
                </div>
                <div class="col-50">
                  <div class="card-flex-box">
                    <div valign="bottom" class="card-header color-white no-border no-padding">
                      <img class="card-cover" src="http://placekitten.com/100/100" alt="" >
                      <!-- <img class="card-cover" src="//gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" alt="" > -->
                    </div>
                    <div class="card-content">
                      <div class="card-content-inner card_flex__inner">
                        <p class="color-gray">商品名称</p>
                        <p class="label-box">
                          <span class="label">雪莲</span>
                          <span class="label">功效</span>
                        </p>
                      </div>
                    </div>
                    <!-- <div class="card-footer">
                      <a href="#" class="link">赞</a>
                      <a href="#" class="link">更多</a>
                    </div> -->
                  </div>
                </div>
                <div class="col-50">
                  <div class="card-flex-box">
                    <div valign="bottom" class="card-header color-white no-border no-padding">
                      <img class="card-cover" src="http://placekitten.com/100/100" alt="" >
                      <!-- <img class="card-cover" src="//gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" alt="" > -->
                    </div>
                    <div class="card-content">
                      <div class="card-content-inner card_flex__inner">
                        <p class="color-gray">商品名称</p>
                        <p class="label-box">
                          <span class="label">雪莲</span>
                          <span class="label">功效</span>
                        </p>
                      </div>
                    </div>
                    <!-- <div class="card-footer">
                      <a href="#" class="link">赞</a>
                      <a href="#" class="link">更多</a>
                    </div> -->
                  </div>
                </div>
              </div>
            </div>
            <!-- 资讯 -->
            <div id="tab2" class="tab">
              <div class="list-block media-list">
                <ul>
                  <li>
                    <a href="#" class="item-content card_box__content">
                      <div class="item-media">
                        <img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg"
                          style="width: 4rem;">
                      </div>
                      <div class="item-inner">
                        <div class="item-title-row">
                          <div class="item-title">大标题</div>
                          <div class="item-after"></div>
                        </div>
                        <div class="item-text">此处是文本内容...</div>
                        <div class="item-subtitle card_box__content_subtile">
                          <span>2018.11.05</span>
                          <span>赞25</span>
                          <span>观看人数125</span>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li>
                    <a href="#" class="item-content card_box__content flex-postiton">
                      <div class="item-media">
                        <img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg"
                          style="width: 4rem;">
                      </div>
                      <div class="item-inner">
                        <div class="item-title-row">
                          <div class="item-title">大标题</div>
                          <div class="item-after"></div>
                        </div>
                        <div class="item-text">此处是文本内容...</div>
                        <div class="item-subtitle card_box__content_subtile">
                          <span>2018.11.05</span>
                          <span>赞25</span>
                          <span>观看人数125</span>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li>
                    <a href="#" class="item-content card_box__content">
                      <div class="item-media">
                        <img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg"
                          style="width: 4rem;">
                      </div>
                      <div class="item-inner">
                        <div class="item-title-row">
                          <div class="item-title">大标题</div>
                          <div class="item-after"></div>
                        </div>
                        <div class="item-text">此处是文本内容...</div>
                        <div class="item-subtitle card_box__content_subtile">
                          <span>2018.11.05</span>
                          <span>赞25</span>
                          <span>观看人数125</span>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li>
                    <a href="#" class="item-content card_box__content">
                      <div class="item-media">
                        <img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg"
                          style="width: 4rem;">
                      </div>
                      <div class="item-inner">
                        <div class="item-title-row">
                          <div class="item-title">大标题</div>
                          <div class="item-after"></div>
                        </div>
                        <div class="item-text">此处是文本内容...</div>
                        <div class="item-subtitle card_box__content_subtile">
                          <span>2018.11.05</span>
                          <span>赞25</span>
                          <span>观看人数125</span>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li>
                    <a href="#" class="item-content card_box__content flex-postiton">
                      <div class="item-media">
                        <img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg"
                          style="width: 4rem;">
                      </div>
                      <div class="item-inner">
                        <div class="item-title-row">
                          <div class="item-title">大标题</div>
                          <div class="item-after"></div>
                        </div>
                        <div class="item-text">此处是文本内容...</div>
                        <div class="item-subtitle card_box__content_subtile">
                          <span>2018.11.05</span>
                          <span>赞25</span>
                          <span>观看人数125</span>
                        </div>
                      </div>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
            <!-- 店铺 -->
            <div id="tab3" class="tab">
              <div  class="list-block media-list">
                <ul>
                  <li>
                    <a href="#" class="item-content card_box__content">
                      <div class="item-media">
                        <img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg"
                          style="width: 2.2rem;">
                      </div>
                      <div class="item-inner">
                        <div class="item-title-row">
                          <div class="item-title">大标题</div>
                          <div class="item-after">1.2km</div>
                        </div>
                        <!-- <div class="item-text">此处是文本内容...</div> -->
                        <div class="item-subtitle">位置信息位置信息位置信息位置信息位置信息位置信息位置信息位置信息位置信息位置信息位置</div>
                      </div>
                    </a>
                  </li>
                  <li>
                    <a href="#" class="item-content card_box__content">
                      <div class="item-media">
                        <img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg"
                          style="width: 2.2rem;">
                      </div>
                      <div class="item-inner">
                        <div class="item-title-row">
                          <div class="item-title">大标题</div>
                          <div class="item-after">1.2km</div>
                        </div>
                        <!-- <div class="item-text">此处是文本内容...</div> -->
                        <div class="item-subtitle">位置信息位置信息位置信息位置信息位置信息位置信息位置信息位置信息位置信息位置信息位置</div>
                      </div>
                    </a>
                  </li>
                  <li>
                    <a href="#" class="item-content card_box__content">
                      <div class="item-media">
                        <img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg"
                          style="width: 2.2rem;">
                      </div>
                      <div class="item-inner">
                        <div class="item-title-row">
                          <div class="item-title">大标题</div>
                          <div class="item-after">1.2km</div>
                        </div>
                        <!-- <div class="item-text">此处是文本内容...</div> -->
                        <div class="item-subtitle">位置信息位置信息位置信息位置信息位置信息位置信息位置信息位置信息位置信息位置信息位置</div>
                      </div>
                    </a>
                  </li>
                  <li>
                    <a href="#" class="item-content card_box__content">
                      <div class="item-media">
                        <img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg"
                          style="width: 2.2rem;">
                      </div>
                      <div class="item-inner">
                        <div class="item-title-row">
                          <div class="item-title">大标题</div>
                          <div class="item-after">1.2km</div>
                        </div>
                        <!-- <div class="item-text">此处是文本内容...</div> -->
                        <div class="item-subtitle">位置信息位置信息位置信息位置信息位置信息位置信息位置信息位置信息位置信息位置信息位置</div>
                      </div>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>


      </div>
      <!-- <div class="top top_fixed">
        <a id="tops" href="#">回顶部</a>
      </div> -->
    </div>
  </div>
  <!-- !-- 固定的js引用，所有的jQuery 要用 $$ 表示 -->
  <script type="text/javascript" src="https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/js/jquery-1.11.1.min.js"></script>
  <!-- 这一行代码是为了 避免js冲突 -->
  <script type="text/javascript">
    var $$ = jQuery.noConflict();
  </script>

  <script type="text/javascript" src="https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/zepto/zepto.min.js"
    charset="utf-8"></script>
  <script type="text/javascript" src="https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/js/sm.min.js"
    charset="utf-8"></script>
  <!-- <script type="text/javascript" src="https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/js/sm-extend.min.js" charset="utf-8"></script> -->
  <!-- <script src="https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/js/swiper/swiper.min.js"></script> -->
  <script src="https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/js/Home/search.js"></script>
  <!-- <script src="../../../js/Home/search.js"></script> -->
  <script type="text/javascript">
    //放函数区域
  </script>
</body>

</html>